import Vue from 'vue'
import VueRouter from 'vue-router'

import { getToken } from '@/utils/storage'

// 1. 导入页面
/**
 * 路由懒加载
 * 语法：const 组件对象 = ()=> import('组件路径')
 * 原理：按照路由页面对代码做了拆分
 * 目的：将来访问面经H5中的页面，例如访问登录页面，只会加载登录页面的js和css执行（按需）
 */
// 一级路由
// import Login from '@/views/Login'
// import Register from '@/views/Register'
// import Detail from '@/views/Detail'
// import Layout from '@/views/Layout'
const Login = () => import('@/views/Login')
const Register = () => import('@/views/Register')
const Detail = () => import('@/views/Detail')
const Layout = () => import('@/views/Layout')

// 二级路由
// import Like from '@/views/Like'
// import Article from '@/views/Article'
// import Collect from '@/views/Collect'
// import User from '@/views/User'
const Like = () => import('@/views/Like')
const Article = () => import('@/views/Article')
const Collect = () => import('@/views/Collect')
const User = () => import('@/views/User')

Vue.use(VueRouter)

// 2. 配置路由
const routes = [
  // 首页（一级）
  {
    path: '/',
    component: Layout,
    redirect: '/article',
    children: [
      // 二级
      // 面经列表
      { path: 'article', component: Article },
      // 点赞列表
      { path: 'like', component: Like },
      // 收藏列表
      { path: 'collect', component: Collect },
      // 个人中心
      { path: 'user', component: User }
    ]
  },
  // 登录（一级）
  { path: '/login', component: Login },
  // 注册（一级）
  { path: '/register', component: Register },
  // 面经详情（一级）
  { path: '/article/:id', component: Detail }
]

const router = new VueRouter({
  routes
})
// 添加路由的前置守卫（保安）=》语法：router.beforeEach(callback回调函数)
router.beforeEach((to, from, next) => {
  // 1. to 去哪（正要访问的页面）
  // 2. from 从哪里来（上次访问的页面）
  // 3. next() 是否放行=》决定了是否可以看to的页面
  //    如果next()调用，就是放行
  //    next(路径) 跳到指定path地址页面

  /**
   * 注意：
   * 1. 请了保安后，callback回调函数中啥也没写，任何页面都不能访问
   */
  // console.log('访问任何页面前：', to, from)
  // 只有调用next()函数才能访问to的页面
  // next()
  debugger
  // 1. 获取token
  const token = getToken()
  // 白名单（vip用户）
  const vips = ['/login', '/register']
  // 2. 判断有无token
  if (token) {
    // 有token
    next()
  } else {
    // 没有token
    // 说明：to.path当前访问的页面地址
    if (vips.includes(to.path)) {
      // 是vip
      next()
    } else {
      // 不是vip=> 跳回登录页
      next('/login')
    }
  }
  debugger
})

export default router
